<template>
    <div class="goods-list">
        
        <div class="goods-item" v-for="item in goodslist" :key="item.id" @click="jumpInfo(item.id)">
            <img :src="item.img_url">
            <h3>{{item.title}}</h3>
            <div class="info">
                <p>
                    <span class="new">￥{{item.sell_price}}</span>
                    <span class="old">￥{{item.market_price}}</span>
                </p>
                <p>
                    <span>热卖中</span>
                    <span>剩余{{item.stock_quantity}}</span>
                </p>
            </div>
        </div>
        <!--  -->
        <mt-button type="danger" size="large" @click="morelist">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';

export default {
    data() {
        return {
            goodslist: [],
            pageindex: 1
        }
    },
    methods: {
        getgoodslist(){
            this.$http.get('api/getgoods?pageindex=' + this.pageindex).then(res => {
                if(res.body.status == 0){
                    this.goodslist = this.goodslist.concat(res.body.message);
                }else{
                    Toast('获取商品列表失败')
                }
            })
        },
        morelist(){
            this.pageindex ++;
            this.getgoodslist();
        },
        // 编程式导航
        jumpInfo(id){
            // this.$route是路由参数对象，所有路由中的参数包括在这里
            // this.$router是路由导航对象，可以使用js代码实现路由的前进后退，跳转地址
            // 路由参数：path、component、children、redirect、name
            
            // window.location.href = "/#/home/goodsinfo/" + id;

            // this.$router.push('/home/goodsinfo/' + id); // 字符串
            // this.$router.push({path: '/home/goodsinfo/' + id}); // 对象
            this.$router.push({name: 'goodsinfo', params: {id} }) // 命名路由 path和params不可同时使用
        }
    },
    created() {
        this.getgoodslist();
    }
}
</script>

<style lang="less" scoped>
    .goods-list{
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .goods-item{
            width: 49%;
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            box-shadow: 0 0 5px #c3c3c3;
            margin-bottom: 10px;
            img{
                width: 100%;
                min-height: 49vw;
                vertical-align: bottom;
            }
            h3{
                color: #525252;
                font-size: 13px;
                padding: 0 5px;
                // 
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .info{
                overflow: auto;
                background: #f5f5f5;
                padding: 0 5px;
                p{
                    color: #717171;
                    font-size: 12px;
                    line-height: 20px;
                    margin: 0;
                    &:first-child{
                        margin-top: 5px;
                    }
                    &:last-child{
                        line-height: 25px;
                        display: flex;
                        justify-content: space-between;
                    }
                    .new{
                        color: red;
                        font-size: 13px;
                        margin-right: 10px
                    }
                    .old{
                        text-decoration: line-through;
                    }
                }
            }
        }
    }
</style>